<template>
  <!-- 轮播配置页面 -->
  <div>
    <div class="header">
      <el-button type="primary" @click="addCarosel">新增</el-button>
      <el-button type="primary" @click="reviewCarosel">预览</el-button>
    </div>
    <div class="content">
      <el-table :data="caroselTable" style="width: 100%">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" width="50" />
        <!-- 产品编号 -->
        <el-table-column prop="name" label="轮播图名称" align="center" />
        <!-- 名称 -->
        <el-table-column prop="introduce" label="轮播图描述" align="center" />
        <!-- 图片 -->
        <el-table-column label="轮播图图片" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.url"
              :preview-src-list="[scope.row.url]"
            />
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '正常'" type="success">正常</el-tag>
            <el-tag v-else type="danger">停用</el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editCarosel(scope.row)">
              编辑
            </el-button>

            <el-button
              style="color: red"
              type="text"
              size="small"
              @click="deleteCarosel(scope.row.id)"
            >删除</el-button>
            <el-button
              v-if="scope.row.status == '正常'"
              style="color: blue"
              type="text"
              size="small"
              @click="UpCarosel(scope.row)"
            >停用</el-button>
            <el-button
              v-else
              style="color: blue"
              type="text"
              size="small"
              @click="DownCarosel(scope.row)"
            >启用</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        @close="dialogClose"
      >
        <!-- 表单区域 -->
        <!-- :model 表单对象 最终我们要提交的那个表单对象 -->
        <!-- :rules 表单验证的规则 -->
        <!-- ref 类比与 id 最终通过ref找到这张表单 -->
        <el-form
          ref="carosel_form"
          :model="caroselForm"
          :rules="rules"
          label-width="80px"
        >
          <!-- 产品名称 -->
          <el-form-item label="名称" prop="name">
            <el-input v-model="caroselForm.name" />
          </el-form-item>

          <el-form-item label="轮播图片" prop="url">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="imageUrl" :src="caroselForm.url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <!-- 产品描述 -->
          <el-form-item label="描述" prop="introduce">
            <el-input
              v-model="caroselForm.introduce"
              type="textarea"
            />
          </el-form-item>
        </el-form>
        <!-- 底部操作按钮区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <!-- 提交表单后 调用重置表单的方法 -->
          <el-button type="primary" @click="submitCForm"> 确 定 </el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogCaroVisible"
        :before-close="handleClose"
      >
        <el-carousel height="350px">
          <el-carousel-item v-for="carosel in caroseldata" :key="carosel.id">
            <img :src="carosel.url" alt="">
          </el-carousel-item>
        </el-carousel>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCaroVisible = false">取 消</el-button>

        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from '@/utils/config'
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
      uploadFileURL,
      caroselTable: [],
      dialogTitle: '编辑轮播图',
      dialogVisible: false,
      caroselForm: {
        name: '',
        introduce: '',
        url: ''
      },
      rules: {
        name: [{ required: true, message: '请输入图片名称', trigger: 'blur' }],
        url: [{ required: true, message: '请添加图片', trigger: 'blur' }]
      },
      imageUrl: '',
      dialogCaroVisible: false,
      caroseldata: ''
    }
  },
  computed: {},
  created() {
    this.showAllCarosel()
  },
  mounted() {},
  methods: {
    async showAllCarosel() {
      const res = await get('/carousel/findAll')
      // console.log(res.data);
      this.caroselTable = res.data
      this.caroseldata = res.data
    },
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传成功之后 更新productForm.photo的路径
      this.caroselForm.url = showFileURL + res.data.id
    },
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传轮播图图片大小不能超过 3MB!')
      }
    },
    addCarosel() {
      this.caroselForm = {}
      // 将imageUrl 置空
      this.imageUrl = ''
      // 设置模态框的标题
      this.dialogTitle = '新增轮播图'
      // 模态框显示出来
      this.dialogVisible = true
    },
    async reviewCarosel() {
      this.dialogCaroVisible = true
      const res = await get('/carousel/query', { status: '正常' })
      // 将拿到的数据赋值给轮播图数组
      this.caroseldata = res.data
    },
    editCarosel(row) {
      this.caroselForm = { ...row }
      // 预览图片 地址赋值
      this.imageUrl = this.caroselForm.url
      // 设置模态框的标题
      this.dialogTitle = '编辑轮播图'
      // 模态框显示出来
      this.dialogVisible = true
    },

    async deleteCarosel(id) {
      const res = await get('/carousel/deleteById', { id })
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.showAllCarosel()
      } else {
        this.$message.error(res.message)
      }
    },
    UpCarosel(row) {
      const res = post('/carousel/saveOrUpdate', { ...row, status: '停用' })
      this.showAllCarosel()
    },
    DownCarosel(row) {
      const res = post('/carousel/saveOrUpdate', { ...row, status: '正常' })
      this.showAllCarosel()
    },
    dialogClose() {
      this.$refs['carosel_form'].resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    },
    submitCForm() {
      this.$refs['carosel_form'].validate(async(valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/carousel/saveOrUpdate', this.caroselForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据
            this.showAllCarosel()
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.dialogCaroVisible = false
    }
  }
}
</script>
<style scoped>
.el-carousel img{
  width: 700px;
  height: 350px;
}
</style>
